<template>
    <j-modal
      width="80%"
      :title="title"
      :visible.sync="editModalVisible"
      :fullscreen.sync="fullscreen"
      :switch-fullscreen="switchFullscreen"
      @cancel="handleCancleDbSync"
      :destroyOnClose="true"
    >
      <template slot="footer">
        <a-button @click="handleCancleDbSync">关闭</a-button>
        <a-button type="primary" :loading="syncLoading" @click="handleDbSync">确定</a-button>
      </template>
      <div class="table-page-search-wrapper warp">
        <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="formData" :rules="rules">
          <a-row :gutter="24">
            <a-col :xl="8" :lg="8" :md="8" :sm="24" >
              <a-form-model-item label="方案编码" prop="templateCode">
                <a-input v-model="formData.templateCode" placeholder="请输入方案编码"/>
              </a-form-model-item>
            </a-col>
            <a-col :xl="8" :lg="8" :md="8" :sm="24">
              <a-form-model-item label="方案名称" prop="templateName">
                <a-input v-model="formData.templateName" placeholder="请输入方案名称"/>
              </a-form-model-item>
            </a-col>
            <a-col :xl="8" :lg="8" :md="8" :sm="24">
              <a-form-model-item label="使用单位" prop="deptCode">
                <JSelectDepart :multi="true" v-model="formData.deptCode" placeholder="请选择使用单位"/>
              </a-form-model-item>
            </a-col>
            <a-col :xl="8" :lg="8" :md="8" :sm="24">
              <a-form-model-item label="适用职务" prop="postCode">
                <JSelectPosition v-model="formData.postCode" :multi="true" />
              </a-form-model-item>
            </a-col>
            <a-col :xl="8" :lg="8" :md="8" :sm="24">
              <a-form-model-item label="备注">
                <a-textarea v-model="formData.remake"/>
              </a-form-model-item>
            </a-col>
            <a-col :xl="8" :lg="8" :md="8" :sm="24">
              <a-form-model-item label="状态">
                <a-switch v-model="formData.templateStatus" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
        <a-tabs defaultActiveKey="1" :tabBarStyle="{marginBottom: '0px'}">
          <a-tab-pane key="1" tab="薪资构成" >
            <salary-template-item-table ref="salaryTemplateItemTable" :templateCode="formData.templateCode" />
          </a-tab-pane>
        </a-tabs>
      </div>
    </j-modal>
</template>
<script>
import { postAction, putAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import SalaryTemplateItemTable from '../modules/SalaryTemplateItemTable'
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
import JSelectPosition from '@/components/jeecgbiz/JSelectPosition'// 职级弹窗
export default {
  name: 'SalaryTemplateModal',
  components: {
    SalaryTemplateItemTable,
    JSelectDepart,
    JSelectPosition
  },
  data() {
    return {
      editModalVisible: false,
      title: '编辑',
      syncLoading: false,
      fullscreen: true,
      switchFullscreen: true,
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      url: {
        edit: '/hr/salary/template/editWithChildren',
        add: '/hr/salary/template/addWithChildren'
      },
      rules: {
        templateCode: [
          { required: true, message: '请输入方案编码', trigger: 'change' },
          { validator: (rule, value, callback) => validateDuplicateValue('hr_salary_template', 'template_code', value, this.formData.id, callback) }
        ],
        templateName: [
          { required: true, message: '请输入方案名称', trigger: 'change' }
        ],
        deptCode: [
          { required: true, message: '请输入方案名称', trigger: 'change' }
        ],
        postCode: [
          { required: true, message: '请输入方案名称', trigger: 'change' }
        ]
      },
      formData: {},
      newFormData: {// 新增用数据
        templateStatus: true,
        salaryTemplateDetails: []
      },
      disableSubmit: false,
      graphTypeDictOptions: [],
      positionSettings: {// 职务弹窗配置
        positionSelectValue: [], // 职务选择值
        positionVisible: false, // 职务弹窗显示
        name: '职务',
        displayKey: 'name',
        returnKeys: ['id', 'code'],
        listUrl: '/sys/position/list',
        queryParamCode: 'name',
        queryParamText: '职务名称',
        columns: [
          { title: '职务名称', dataIndex: 'name', align: 'center', width: '30%', widthRight: '70%' },
          { title: '职务编码', dataIndex: 'code', align: 'center', width: '35%' },
          { title: '职级', dataIndex: 'rank_dictText', align: 'center', width: '25%' }
        ]
      }
    }
  },
  computed: {
    positionModalProps() { // 职务弹窗属性
      return Object.assign({
        valueKey: this.positionSettings.returnKeys[1],
        multiple: true,
        returnKeys: this.positionSettings.returnKeys,
        displayKey: this.positionSettings.displayKey
      }, this.$attrs)
    }
  },
  methods: {
    handleCancleDbSync() { // 关闭
      this.editModalVisible = false
    },
    edit(record) {
      this.formData = JSON.parse(JSON.stringify(record))
      this.editModalVisible = true
    },
    add() {
      this.formData = JSON.parse(JSON.stringify(this.newFormData))
      this.editModalVisible = true
    },
    handleDbSync() { // 弹窗点击确定
      Promise.all([
        this.$refs.salaryTemplateItemTable.validate(),
        this.$refs['ruleForm'].validate()
      ]).then((res) => {
        this.updateData()
      }).catch(function(reason) {
        console.log(reason)
      })
    },
    updateData() { // 保存提交数据
      const { fullData } = this.$refs.salaryTemplateItemTable.getTableData()
      this.formData.salaryTemplateDetails = fullData
      if (this.formData.id) {
        putAction(this.url.edit, this.formData).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.editModalVisible = false
            this.$emit('ok')
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          // this.loading = false
        })
      } else {
        postAction(this.url.add, this.formData).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.editModalVisible = false
            this.$emit('ok')
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          // this.loading = false
        })
      }
    }
  }
}
</script>
<style lang="less">
.picker{
  width:100%;
}
</style>
